<template>
    <div>
        <vue-particles
        id="particles-js"
        color="#555"
        :particleOpacity="0.7"
        :particlesNumber="150"
        shapeType="circle"
        :particleSize="4"
        linesColor="#555"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect= "true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
        class="login-bg"
        ></vue-particles>
    <el-form label-width="70px" class="loginContainer" ref="loginFrom" :model="loginFrom" :rules="rules">
      <h3 class="loginTitle">系统登录</h3>
    <el-form-item label="用户名"  prop="username">
        <el-input type="text"  auto-complete="false" v-model="loginFrom.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginFrom.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked">记住我</el-checkbox>
    <el-button type="primary" class="loginButton" @click="submitLogin">登录</el-button>
    </el-form>
    </div>
</template>

<script>
import {Login} from '@/network/login'
export default {
    name:'Login',
    data() {
        return {
            loginFrom: {
                username:'admin',
                password:'123456',
            },
            checked:false,
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        submitLogin(){
                this.$refs.loginFrom.validate((valid) => {
                    if (!valid) return console.log("输入有误");
                    Login(this.loginFrom.username, this.loginFrom.password).then(
                        (res)=>{
                        if(res.meta.status && res.meta.status == 400) return this.$message.error(res.meta.msg);
                        this.$message.success('登录成功');
                        window.sessionStorage.setItem('token',res.data.token);
                        this.$router.push('/Home')
                    }) 
            });
        }
    },
}
</script>

<style scoped>
    .loginContainer{
        position: absolute;
        border-radius: 15px;
        background-clip: padding-box;
        left: 50%;
        top: 50%;
        margin-left: -220px;
        margin-top: -170px;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow:0 0 25px #cad;
    }
    .loginTitle{
        margin: 0 auto 10px;
        text-align: center;
    }
    .loginButton{
        width: 100%;
        margin: 10px 0 15px 0;
    }
    #particles-js{
          position:fixed;
          top:0;
          width:100%; 
          height: 100%;  
      }
</style>